<template>
  <el-card class="box-card" header="菜单管理">
    <DataManageTable
      ref="tableRef"
      :tableConfig="tableConfig"
      @getTableData="getTableData"
      @saveRowEvent="saveRowEvent"
    />
  </el-card>
</template>

<script setup>
import { getTableDataAsync, saveOrUpdateAsync } from '@/api/systemManage/menu'
import { useDataManage } from '@/hooks'
import tableConfig from './config/table.config'

// 表格实例
const tableRef = ref(null)
// 数据表格
const { getTableData, saveRowEvent } = useDataManage({
  getTableDataAsync,
  saveOrUpdateAsync,
  saveParamsCallBack,
  tableRef
})

/**
 * @description 保存参数回调
 * @typedef {{
 * id: string,
 * path: string,
 * }} RowData
 * @param {RowData[]} updateRow
 * @param {RowData} row
 */
function saveParamsCallBack(updateRow, row) {
  // 参数信息
  const { id, name, path } = updateRow[0] || row
  return {
    id,
    name,
    path
  }
}
</script>

<style scoped lang="scss">
.box-card {
  height: 100%;

  :deep(.el-card__body) {
    height: calc(100% - 58px);
  }
}
</style>
